<template>
	<view class="editorSimplicity">
		<textarea
			placeholder="这一刻的想法..."
			placeholder-style="color:#C0C4CC;"
			maxlength="-1"
			v-model="VmodelContent"></textarea>
		<view class="two-button">
			<view class="emoji-button" @click="clickEmoji">
				<text class="iconfont icon-smile"></text>
			</view>
			<template v-if="JSON.stringify(editorConfig) != '{}'">
				<view
					class="right-group"
					v-if="editorConfig.editor.features.group.status">
					<view @click="clickGroup">
						<text class="iconfont icon-taolunqu"></text>
						<text class="text">{{postGname}}</text>
						<text
							v-if="editorConfig.editor.features.group.required"
							class="iconfont icon-essential"></text>
						<text class="iconfont icon-arrow-down"></text>
					</view>
				</view>
			</template>
		</view>
		<view class="emoji-list" v-if="emojiState">
			<template v-if="emojiList.length">
				<scroll-view scroll-y>
					<text
						@click="clickclickEmojiItem(item)"
						v-for="item in emojiList">{{item}}</text>
				</scroll-view>
			</template>
			<template v-else>
				<public-loading></public-loading>
			</template>
		</view>
		<template v-if="JSON.stringify(editorConfig) != '{}'">
			<view
				class="image-list"
				v-if="editorConfig.editor.toolbar.image.status">
				<view
					@click="$_picturePreview(index,listImages)"
					v-for="(item,index) in listImages"
					class="for">
					<view class="image">
						<image :src="item.imageRatioUrl" mode="aspectFill"></image>
					</view>
					<text
						@click.stop="clickDeleteAttachment(item.fid)"
						class="iconfont icon-close-bold"></text>
				</view>
				<view
					v-if="listImages.length != editorConfig.editor.toolbar.image.uploadNumber"
					class="image-button"
					@click="clickFileImage">
					<text class="iconfont icon-add"></text>
				</view>
			</view>
		</template>
		<view class="list" v-if="JSON.stringify(editorConfig) != '{}'">
			<view
				class="for"
				v-if="editorConfig.editor.features.location.status"
				@click="clickMap">
				<template v-if="mapName == '所在位置'">
					<text class="iconfont icon-dingwei"></text>
					<text class="text">{{mapName}}</text>
					<text class="iconfont icon-arrow-right"></text>
				</template>
				<template v-else>
					<text class="iconfont icon-dingwei" style="color: #409EFF;"></text>
					<text class="text" style="color: #409EFF;">{{mapName}}</text>
					<text class="iconfont icon-arrow-right" style="color: #409EFF;"></text>
				</template>
			</view>
			<!-- <view class="for">
				<text class="iconfont icon-shequ"></text>
				<text class="text">提醒谁看</text>
				<text class="iconfont icon-arrow-right"></text>
			</view> -->
		</view>
		<view class="publish-button" @click="clickPublish">发表</view>
		<!-- 内容小组 -->
		<view
			class="position-group"
			v-if="groupBox"
			@click="clickGroup">
			<view class="box">
				<scroll-view scroll-y>
					<template v-if="listGroup.length">
						<view class="box-list">
							<template v-for="item in listGroup">
								<view class="_title">{{item.gname}}</view>
								<view
									@click.stop="clickGroups(groups.gname,groups.gid)"
									class="for"
									v-for="groups in item.groups"
									:key="groups.gid">
									<view class="image">
										<image :src="groups.cover" mode="widthFix"></image>
									</view>
									<view class="text">{{groups.gname}}<text>{{groups.publishRule.allowPost?'':'[无权]'}}</text></view>
									<view class="select-button">
										选择<text class="iconfont icon-arrow-right"></text>
									</view>
								</view>
							</template>
						</view>
					</template>
					<template v-else>
						<public-loading></public-loading>
					</template>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				postGid:"",
				postGname:"未选择",
				postContent:"",
				emojiState:false,
				emojiList:[],
				VmodelContent:"",
				listGroup:[],
				groupBox:false,
				editorConfig:{},
				listImages:[],
				mapName:"所在位置",
			}
		},
		onLoad(e) {
			
			// 是否有小组id
			if(e.gid){
				this.postGid = e.gid;
			}
			// 是否有小组名称
			if(e.gname){
				this.postGname = e.gname;
			}
			// 是否有话题标签
			if(e.hid){
				this.$_Request(
					"GET","/api/v2/editor/post/config",{},
					(res) => {
						if(res.data.data.editor.toolbar.hashtag.showMode == 1){
							this.postContent += ' #'+e.hid+' ';
						}else{
							this.postContent += ' #'+e.hid+'# ';
						}
					}
				)
			}
			uni.request({
				url:this.$_Config() + "Config.json",
				method:'GET',
				success: (res) => {
					this.allConfig = res.data;
					this.emojiList = res.data.allEmoji;
					// 请求编辑器配置
					this.getEditor();
				}
			})
		},
		methods: {
			// 请求编辑器配置
			getEditor(){
				this.$_Request(
					"GET","/api/v2/editor/post/config",{},
					(res) => {
						this.editorConfig = res.data.data;
						this.createDraft();
					}
				)
			},
			// 创建草稿
			createDraft(){
				this.$_Request(
					"POST","/api/v2/editor/post/create",
					{
						"createType":1
					},
					(res) => {
						if(res.data.code == 0){
							this.draftId = res.data.data.detail.id;
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none",
								duration:1000
							});
						}
					}
				)
			},
			// 发布按钮
			clickPublish(){
				uni.showLoading({ title: "内容发布中" });
				this.updateDraft('publishing')
			},
			// 更新草稿
			updateDraft(type,fid){
				if(!this.mapAddress){
					this.dataMap = {};
				}else{
					this.dataMap = {
						"mapId":4,
						"latitude": this.mapLatitude,
						"longitude": this.mapLongitude,
						"poi":this.mapName,
						"poiId":'',
						"address":this.mapAddress
					}
				}
				this.$_Request(
					"PUT","/api/v2/editor/post/" + this.draftId,
					{
						"postTitle":"",
						"postGid":this.postGid,
						"content":this.VmodelContent,
						"deleteFile":fid?fid:"", // 删除附件
						"map":this.dataMap,
					},
					(res) => {
						// 删除附件
						if(type == 'deleteFile'){
							if(res.data.code == 0){
								uni.hideLoading();
								// 重新获取草稿详情
								this.getObtainDraftDetails();
							}else{
								uni.showToast({
									title:res.data.message,
									icon:"none",
									duration:1000
								});
							}
						}
						// 直接发布
						if(type == 'publishing'){
							if(res.data.code == 0){
								this.$_Request(
									"POST","/api/v2/editor/post/" + this.draftId,{},
									(res_) => {
										if(res_.data.code == 0){
											this.$store.commit('mutationsStatelistStatus',true)
											uni.navigateBack();
										}else{
											if(res_.data.code==38208){
												uni.hideLoading();
												this.clickGroup()
											}else{
												uni.showToast({
													title:res_.data.message,
													icon:"none",
													duration:1000
												});
											}
										}
									}
								)
							}else{
								uni.showToast({
									title:res.data.message,
									icon:"none",
									duration:1000
								});
							}
						}
					}
				)
			},
			// 小组框子按钮
			clickGroup(){
				this.groupBox = !this.groupBox;
				if(this.groupBox){
					this.getGroup();
				}else{
					this.textareaFocus = true;
				}
			},
			// 选中小组
			clickGroups(name,pid){
				this.postGname = name;
				this.postGid = pid;
				this.groupBox = false;
			},
			// 请求组列表
			getGroup(){
				this.$_Request(
					"GET","/api/v2/group/tree",
					{
						"whitelistKeys":"gname,groups,cover,gid,publishRule"
					},
					(res) => {
						this.listGroup = this.$_removeItems(res.data.data, this.allConfig.blockGroups);
					}
				)
			},
			// 获取草稿详情
			getObtainDraftDetails(){
				this.$_Request(
					"GET","/api/v2/editor/post/" + this.draftId,{},
					(res) =>{
						this.listImages = res.data.data.detail.files.images;
						console.log(this.listImages)
					}
				)
			},
			// 表情按钮
			clickEmoji(){
				this.emojiState = !this.emojiState;
			},
			// 选中表情
			clickclickEmojiItem(item){
				this.VmodelContent += item
			},
			// 点击，图片按钮
			clickFileImage(){
				let number = this.editorConfig.editor.toolbar.image.uploadNumber;
				uni.chooseImage({
					count:parseInt(number) ? parseInt(number) : 1,
					success: (res) => {
						this.UploadImage(res.tempFiles)
					}
				})
			},
			// 上传图片
			UploadImage(params){
				uni.showLoading({ title: "上传中" });
				return new Promise((presolve, preject) => {
					let uploads = [];
					(params).forEach((item, i) => {
						uploads[i] = new Promise((resolve) => {
							uni.uploadFile({
								url: this.$_Url() + "/api/v2/common/upload-file",
								filePath: item.path,
								name: "file",
								header: this.$_FresnsHeader(),
								formData:{
									"tableName":"post_logs",
									"tableColumn":"id",
									"type":"image",
									"uploadMode":"file",
									"tableId":this.draftId
								},
								success(res) {
									if(JSON.parse(res.data).code == 0){
										resolve()
									}else{
										uni.hideLoading();
										resolve()
									}
								},
								fail(err) {
									
								}
							})
						})
					})
					Promise.all(uploads).then(res => {
						//图片上传完成
						presolve(res)
						uni.hideLoading();
						this.getObtainDraftDetails();
					}).catch(err => {
						preject(err)
						uni.showToast({
							title: '上传失败请重试',
							icon: 'none'
						})
					})
				})
			},
			// 点击，删除附件
			clickDeleteAttachment(fid){
				uni.showModal({
					title: "提示",
					content: "是否要删除本附件？",
					success: (res) => {
						if(res.confirm) {
							uni.showLoading();
							this.updateDraft('deleteFile',fid)
						}
					}
				});
			},
			// 选择位置按钮
			clickMap(){
				uni.chooseLocation({
					success: (res) => {
						this.mapLatitude = res.latitude;
						this.mapLongitude = res.longitude;
						this.mapName = res.name;
						this.mapAddress = res.address;
					}
				});
			},
		}
	}
</script>

<style lang="scss">
.editorSimplicity{
	textarea{
		padding: 50rpx 25rpx;
		width:calc(100% - 50rpx);
		height: 180rpx;
	}
	.two-button{
		display: flex;
		align-items: center;
		margin: 25rpx;
		justify-content:space-between;
		.emoji-button{
			line-height: 55rpx;
			text{
				font-size: 55rpx;
			}
		}
		.right-group{
			margin-top: -10rpx;
			view{
				border: 1rpx solid $BianKuangSe;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 46rpx;
				padding: 0 15rpx;
				border-radius: 100rpx;
				background: #FFF;
				.icon-taolunqu{
					color: $ZhanWeiSe;
					font-size: 35rpx;
					line-height: 35rpx;
				}
				.icon-essential{
					color: $ZhanWeiSe;
					font-size: 22rpx;
					line-height: 22rpx;
					font-weight: bold;
					color: red;
				}
				.icon-arrow-down{
					color: $ZhanWeiSe;
					font-size: 26rpx;
					line-height: 26rpx;
				}
				.text{
					color: $ZhanWeiSe;
					font-size: 28rpx;
					line-height: 28rpx;
				}
			}
		}
	}
	.emoji-list{
		scroll-view{
			width:calc(100% - 50rpx);
			height: 270rpx;
			background: $BeiJingSe;
			padding: 25rpx;
			text{
				display: inline-block;
				font-size: 57rpx;
				line-height: 57rpx;
				padding:10rpx 10rpx;
			}
		}
	}
	.image-list{
		margin: 0 25rpx 0 0;
		display: flex;
		flex-wrap: wrap;
		.for{
			width: 216.666rpx;
			height: 216.666rpx;
			background: $BeiJingSe;
			margin: 25rpx 0 0 25rpx;
			position: relative;
			overflow: hidden;
			.image{
				width: 216.666rpx;
				height: 216.666rpx;
				background: $BeiJingSe;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				image{
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			.iconfont{
				color: #FFF;
				position: absolute;
				top: 10rpx;
				right: 10rpx;
				z-index: 2;
				font-size: 40rpx;
				line-height: 40rpx;
				text-shadow: 0 0 1rpx #000;
			}
		}
		.image-button{
			width: 216.666rpx;
			height: 216.666rpx;
			background: $BeiJingSe;
			margin: 25rpx 0 0 25rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			text{
				font-size: 80rpx;
				line-height: 80rpx;
				color: $ZhanWeiSe;
			}
		}
	}
	.list{
		margin: 25rpx 25rpx 0 25rpx;
		.for{
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid $BeiJingSe;
			line-height: 32rpx;
			font-size: 32rpx;
			padding: 25rpx 0;
			.iconfont{
				flex-shrink: 0;
				font-size: 50rpx;
				line-height: 50rpx;
			}
			.text{
				flex: 1;
				padding: 0 15rpx;
				display: -webkit-box;
				/*!autoprefixer:off*/
				-webkit-box-orient: vertical;
				/*autoprefixer:on*/
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
			.icon-arrow-right{
				font-size: 32rpx;
				line-height: 32rpx;
				color: $ZhanWeiSe;
			}
		}
	}
	.publish-button{
		font-size: 32rpx;
		line-height: 32rpx;
		color: #FFF;
		background: $LanSe;
		margin: 50rpx auto 25rpx auto;
		width: 200rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 15rpx;
	}
	.position-group{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		display: flex;
		justify-content: center;
		.box{
			margin-top: 5vh;
			width: 80%;
			height: 80vh;
			background: #FFF;
			box-shadow: 0 0 10rpx #666;
			scroll-view{
				margin: 15rpx 25rpx 25rpx 25rpx;
				width:calc(100% - 50rpx);
				height:calc(80vh - 40rpx);
				.box-list{
					._title{
						text-align: center;
						color: $ZhanWeiSe;
						border-bottom: 1rpx solid $BianKuangSe;
						padding: 15rpx 0 25rpx 0;
					}
					.for{
						display: flex;
						align-items: center;
						padding: 25rpx 0 0 0;
						.image{
							width: 50rpx;
							height: 50rpx;
							overflow: hidden;
							border-radius: 100%;
						}
						.text{
							flex: 1;
							margin: 0 15rpx;
							text{
								color: $ZhanWeiSe;
								font-size: 22rpx;
								padding-left: 5rpx;
							}
						}
						.select-button{
							color: $ZhanWeiSe;
							display: flex;
							align-items: center;
							.icon-arrow-right{
								font-size: 30rpx;
								line-height: 30rpx;
								padding-left: 10rpx;
							}
						}
					}
				}
			}
		}
	}
}
</style>
